<template>
  <a-modal
    :title="formTile + '权限'"
    :visible="true"
    width="50%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-form-model
          ref="ruleForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="form"
          :rules="rules"
        >
          
          <a-form-model-item
            label="角色名称"
            prop="name"
          >
            <a-input
              placeholder="请输入角色名称"
              v-model="form.name"
            />
          </a-form-model-item>
        <a-form-model-item
            label="权限列表"
            prop="type"
          >
            <!-- <a-select
             
            >
              <a-select-option v-for="item,i in colorType" :key="i" :value="item.code" >
               {{item.title}}
              </a-select-option>
            </a-select> -->
            <a-tree-select
    v-model="form.authIdList"
              search-placeholder="请选择权限列表"
    style="width: 100%"
    :tree-data="authList"
    @select="changeSelect"
    tree-checkable
    
  />
  <!-- :show-checked-strategy="SHOW_PARENT" -->
          </a-form-model-item>
     
          <a-form-model-item>
            <a-row style="margin-top:10px">
              <a-col
                :span="16"
                :offset="18"
                class="info-action"
              >
                <a-button @click="reset">
                  重置
                </a-button>
                <a-button
                  :style="{ marginLeft: '8px' }"
                  type="primary"
                  @click="onSubmit"
                  :loading="loading"
                >
                  保存
                </a-button>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import { postAction } from '@/api/manage'
export default {
  components: {},

  props: {
    roleId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-material/',
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      SHOW_PARENT,
      authList:[],
      form: {
        authIdList: [],
        name: '',
      },
      rules: {
        authIdList: [{ required: true, message: '请选择权限列表', trigger: 'blur' }],
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      },
      loading: false
    }
  },

  created() {
    const { roleId } = this.$props
    if (roleId) {
      this.formTile = '编辑'
      this.getDetail()
    } else {
      this.formTile = '新增'
    }
    this.getAuthList()
  },
  mounted() {},
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset() {
      this.$refs.ruleForm.resetFields()
      this.$emit('close')
    },
    changeSelect(values){
      console.log(this.form.authIdList);
    },
    getAuthList(){
     const params = {}
      try {
        postAction(`${this.urlKey}auth/full`, params).then(res => {
          if (res.code == 200) {
            this.authList = res.data
            this.authList.map((item)=>{
              item.children = item.authList
              item.title = item.pageName
              item.value = item.pageCode
              item.key = item.pageCode
              item.children.map((subitem)=>{
                subitem.title = subitem.buttonName
              subitem.value = subitem.authId
              subitem.key = subitem.buttonCode
              })
            })
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('获取详情失败！')
      } 
    },
    getDetail() {
      const params = {
        roleId:this.roleId
      }
      try {
        postAction(`${this.urlKey}role/info`, params).then(res => {
          if (res.code == 200) {
            this.form = res.data
            this.form.name = res.data.roleName
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('获取详情失败！')
      } 
    },
    submit() {
      const params = JSON.parse(JSON.stringify(this.form))
      params.jobNumber = this.jobNumber
      if(this.roleId){
        params.roleId = this.roleId
      }
      const FNCName = this.roleId ? `${this.urlKey}role/update` : `${this.urlKey}role/save`
      try {
        postAction(FNCName, params).then(res => {
          if (res.code == 200) {
            this.$message.success(this.roleId ?'编辑成功！':'新增成功！')
            this.reset()
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('操作失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}
.ml-20 {
  margin-left: 20px;
}
</style>